<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>29早上练习</title>

	<style>
		#top{
			width: 200px;
			height: 400px;
			/*background: gray url() 0 0 no-repeat;*/
		}

		.caidan{
			list-style: none;
			line-height: 50px;
			width: 200px;
			height: 50px;
			background: yellow ;
			margin-top: 10px;
		}


		.list{
			position: relative;
		}

		.tan{
			width: 350px;
			height: 350px;
			background: green url() 0 0 no-repeat;
			position: absolute;
			top:0px;
			left: 240px;
			display: none;
		}


	</style>	

	<script type="text/javascript">
			window.onload=function(){

				// 轮播图功能
				var caidan=document.getElementsByClassName('caidan');
				var tan=document.getElementsByClassName('tan');
				for (var i = 0; i <= caidan.length; i++) {
					caidan[i].onmouseover=function(){
						this.style.background="red";
						this.lastChild.style.display="block";
					}

					caidan[i].onmouseout=function(){
						this.style.background="yellow";
						this.lastChild.style.display="none";
					}

				};





				 // 仅仅是左边的菜单栏变色
				// var caidan=document.getElementsByClassName("caidan");

				// for (var i = 0; i <caidan.length; i++) {
				// 	caidan[i].onmouseover=function(){
				// 		this.style.background="red";
				// 	}

				// 	caidan[i].onmouseout=function(){
				// 		this.style.background="yellow";
				// 	}
				// };

				// 	abc(i)
				// function abc(i){
				// 	caidan[i].onmouseover=function(){
				// 		caidan[i].style.background="red";
				// 		tan[i].style.display="block";
				// 	}
				// 	caidan[i].onmouseout=function(){
				// 		caidan[i].style.background="yellow";
				// 		tan[i].style.display="none";
				// 	}
				// }





			}
	</script>
</head>
<body>
	 
	<div id="top">
		<ul class="list">
			<li class="caidan">小米手机1<div class="tan">米1</div></li>
			<li class="caidan">小米手机2<div class="tan">米2</div></li>
			<li class="caidan">小米手机3<div class="tan">米3</div></li>
			<li class="caidan">小米手机4<div class="tan">米4</div></li>
			<li class="caidan">小米手机5<div class="tan">米5</div></li>
			<li class="caidan">小米手机6<div class="tan">米6</div></li>
		</ul>
	</div>
</body>
</html>